import React, { Component } from 'react';

import { View } from 'react-native';

//NavigationContainer管理我们的导航树并包含导航状态的组件。该组件必须包装所有导航器结构
import { NavigationContainer } from '@react-navigation/native';
//堆栈导航器
import { createStackNavigator } from '@react-navigation/stack';
import { enableScreens } from 'react-native-screens';
// //屏幕底部有一个简单的标签栏，可让您在不同的路线之间切换。
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
//导入图标库
import Ionicons from 'react-native-vector-icons/Ionicons';

import HomePage from './pages/Home';
import DetailPage from './pages/Detail';
import ListPage from './pages/List';
import Logo from './components/Logo';

//定义底部Tab组件
function BottomTab() {
  //呈现一个标签栏，让用户在多个屏幕之间切换
  const Tab = createBottomTabNavigator();

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        //该属性的值是一个函数返回一个React元素(组件)
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          switch (route.name) {
            case '首 页':
              iconName = 'ios-home';
              break;
            case '列 表':
              iconName = 'ios-list';
              break;
          }

          return (
            <Ionicons
              name={iconName}
              size={size}
              color={color}
            />
          );
        }
      })}
      tabBarOptions={{
        activeTintColor: '#23b8ff',
        inactiveTintColor: '#999'
      }}
    >
      <Tab.Screen name="首 页" component={HomePage}></Tab.Screen>
      <Tab.Screen name="列 表" component={ListPage}></Tab.Screen>
    </Tab.Navigator>

  );
}


function Txclass() {
  //搭配Stack.Screen使用，否则报错
  //参考文档：https://reactnavigation.org/docs/5.x/native-stack-navigator/
  enableScreens();

  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{
        headerTitleAlign: 'center'
      }}>
      {/* Screen以定义路由的配置。 */}
        <Stack.Screen
          name="Tab"
          component={BottomTab}
          // headerTitle 可以是一个函数返回一个react元素组件
          options={{
            headerTitle: props => <Logo {...props}/>
          }}
          
        />
        <Stack.Screen
          name="Detail"
          component={DetailPage}
          options={{
            headerTitle: props => <Logo {...props}/>,
            headerBackTitle: '返回'
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default Txclass;